import axios from 'axios'
import React from 'react'
import { Button } from 'antd'
import { useState } from 'react'
import './HappyList.css'

export default function HappyMoment() {
  const [happyList, sethappy] = useState([])
  const [disturbList, setdisturb] = useState([])
  const [speakList, setspeak] = useState([])
  const [loveList, setlove] = useState([])
  const [imgList, setimg] = useState([])

  const happyChange = () => {
    axios.get('https://api.vvhan.com/api/joke').then(res => {
      sethappy(res.data)
    })
  }

  const disturbChange = () => {
    axios.get('https://api.vvhan.com/api/sao').then(res => {
      setdisturb(res.data)
    })
  }

  const speakChange = () => {
    axios.get('https://api.vvhan.com/api/ian').then(res => {
      setspeak(res.data)
    })
  }

  const loveChange = () => {
    axios.get('https://api.vvhan.com/api/love').then(res => {
      setlove(res.data)
    })
  }

  const imgChange = () => {
    axios.get('https://api.vvhan.com/api/view').then(res => {
      setimg(res.config.url)
    })
  }
  return (
    <div className='happyBox' style={{ backgroundImage: 'https://api.vvhan.com/static/img/bg.jpeg', backgroundRepeat: 'no-repeat', backgroundSize: '100%' }}>
      <div style={{ width: '100%' }}>
        <Button type="primary" onClick={() => happyChange()}>随机笑话</Button>
        <div className='happytext'>{happyList}</div>
      </div>
      <div style={{ width: '100%' }}>
        <Button type="primary" onClick={() => disturbChange()}>随机骚话</Button>
        <div className='happytext'>{disturbList}</div>
      </div>
      <div style={{ width: '100%' }}>
        <Button type="primary" onClick={() => speakChange()}>一言一句</Button>
        <div className='happytext'>{speakList}</div>
      </div>
      <div style={{ width: '100%' }}>
        <Button type="primary" onClick={() => loveChange()}>随机情话</Button>
        <div className='happytext'>{loveList}</div>
      </div>
      <div style={{ width: '100%' }}>
        <Button type="primary" onClick={() => imgChange()}>随机图片</Button>
        <div className='happytext' style={{ width: '600px', height: '320px', margin: '0 auto' }}>
          <img style={{ width: '100%', height: '100%' }} src={imgList}></img>
        </div>
      </div>
    </div>
  )
}
